{{> app/views/shared/header.mustache }}
{{> app/views/shared/heading.mustache }}
<div class="message" style="margin-bottom:15px">
    Hmm! Looks like you're creating a new command!<br/>Good for you, buckeroo!
</div>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<style>#x { display: none; }</style>
<script>
  var timer = createQuiescenceTimer(500, function() {
    name = getName();
    if (name == '') { return; }
    new Ajax.Request('/command/exists', {
        method: 'get',
        parameters: 'name=' + encodeURIComponent(name),
        onComplete: function(request) {
          var data = eval('(' + request.responseText + ')')
          if (data.exists) {
            document.getElementById('error_message').innerHTML = "Hmm ... <b>" + name + "</b> is already taken (<a style='color:red' href='/parser/parse?command=man+"+name+"'>description</a>). Would you be willing to pick another name?";
            document.add_command_form.submit_button.disabled = true;
          }
        }
    });
  });
  function trim(str) {
    return str.replace(/^\s*|\s*$/g,"");
  }
  function getName() {
    return trim(document.getElementById('command_name').value);
  }
  function commandNameChanged(clearErrorMessageIfNameValid) {
    name = getName();
    if (name.indexOf(' ') > -1) {
      document.getElementById('error_message').innerHTML = "Heya! Would you be willing to remove the spaces? I get confused. How about <b>" + name.replace(new RegExp(' ', 'ig'), '') + "</b> (all one word)?";
      document.add_command_form.submit_button.disabled = true;
    }
    else {
      if (clearErrorMessageIfNameValid) {
        document.getElementById('error_message').innerHTML = "";
      }
      document.add_command_form.submit_button.disabled = false;
      timer.trigger();
    }
    document.getElementById('test_command_label').innerHTML = name != "" ? name : "gim";
    if (document.getElementById('test_command_text_box').value.indexOf(' ') == -1) {
      document.getElementById('test_command_text_box').value = name
    }
  }
  /**
   * Returns an object that will execute the callback when its trigger() method is called, but only after a
   * given "quiescent period" in which trigger() is not called. Useful for triggering an expensive event; it will
   * run only after the triggers quiet down.
   */
  function createQuiescenceTimer(milliseconds, callback) {
      var lastTriggerId = 0;
      return {
          trigger : function() {
              lastTriggerId++;
              var triggerId = lastTriggerId;
              window.setTimeout(function() {
                  if (triggerId == lastTriggerId) { callback(); }
              }, milliseconds);
          }
      };
  }
</script>
<form action="/command/add_command" method="post" name="add_command_form">
  <table>
  {{^name}}
  <tr>
    <td></td>
    <td class="hint">First type in the desired name for your new command (a name that hasn't been used already).</td>
  </tr>
  {{/name}}
  <tr>
    <td></td>
    <!-- Use an nbsp (any character will do); otherwise the row gets 0 height [Jon Aquino 2005-06-17] -->
    <td rowheight="20"><span id="error_message" class="hint" style="color:red">{{errorMessage}}</span>&nbsp;</td>
  </tr>
  <tr>
    <td><label for='command_name'>Command:</label></td>
    <td><input id="command_name" name="command[name]" onkeydown="commandNameChanged(true)" onkeyup="commandNameChanged(true)" size="30" type="text" value="{{name}}" />
    {{^name}}
      <span class="hint">e.g. gim</span>
    {{/name}}
    </td>
  </tr>
  <tr>
    <td></td>
    <td class="hint" style="padding-top:20px">Next, paste in the URL for your command. If your command takes parameters (like "porsche 911"),
    use %s to indicate where to put them e.g. http://images.google.com/images?q=%s. (For more complex commands, there are
    <a href="/documentation/describe_advanced_syntax" class="hint">advanced tricks</a>,
    like ${multiple parameters})</td>
  </tr>
  <tr>
    <td><label for='command_url'>URL:</label></td>
    <td><input id="command_url" name="command[url]" size="55" type="text" value="{{url}}" /> <span class="hint">e.g. http://images.google.com/images?q=%s</span></td>
  </tr>
  <tr>
    <td></td>
    <td class="hint" style="padding-top:20px">
      Before you go on, try out your command! It's important to get it right, because the only way to fix your command is
      to send me an
      <a class="hint" href="mailto:jon@yubnub.org?subject=Yubnub: Request For Edit&body=Jon, would you make the following change to the ..... command?">email</a>.<br />
      <input id="test_command_text_box" type="text" name="test_command" size="50" />
      <input onclick="document.add_command_form.target='_new'" name='test_button' type='submit' value='Test' />
      <input onclick="document.add_command_form.target='_new'" name='view_url_button' type='submit' value='View URL' /><br />
      e.g. <span id="test_command_label">gim</span> porsche 911 (will open in a new window)
    </td>
  </tr>
  <tr>
    <td></td>
    <td class="hint" style="padding-top:20px">Finally, enter a description so that others will know what your command
    does. People like examples! Here's a good description:<br/>
  <br/>
  <div style="margin-left:50px">
  <i>
  Google Maps Search. Google Maps has several handy features included within it.<br/>
  <br/>
  To map out a single location, just type the address.<br/>
  Example: gmaps 123 Maple Dr. Detroit, MI<br/>
  <br/>
  To find businesses or other specific things, simply give the location and business.<br/>
  Example: gmaps pizza in Detroit<br/>
  <br/>
  </i>
  </div>
  </td>
  </tr>
  <tr>
    <td><label for='command_description'>Description:</label></td>
    <td><textarea cols="70" id="command_description" name="command[description]" rows="8" wrap="off">{{description}}</textarea></td>
  </tr>
  <tr>
    <td></td>
    <td>
      {{{captchaHtml}}}
    </td>
  </tr>
  <tr>
    <td></td>
    <td class="hint" style="padding-top:20px">
      Tested your command and it works OK? Time to make it real.<br />
      <input onclick="document.add_command_form.target=''" name='submit_button' type='submit' value='Create my command!' />
    </td>
  </tr>
  </table>
  <script type="text/javascript">
    commandNameChanged(false);
  </script>
  <input type="text" name="x" id="x" size="1"/>
</form>
{{> app/views/shared/footer.mustache }}
